<template>
  <dt-modal-edit ref="editRef" title="项目账号数变更" @ok="onOk" @cancelData="cancelData">
    <div class="topBox">
      <span>
        <Icon style="vertical-align: -8px" size="30" color="#2D61F4" type="ios-list-box-outline" />
        {{ editInfo.tenantName }}（编号：{{ editInfo.tenantCode }}）- {{ editInfo.tenantStatusName }}
      </span>
    </div>
    <dt-info :label-width="120" ref="proInfo"></dt-info>
    <Form ref="form">
      <FormItem label="剩余账号数：">
        <span :style="{ color: editInfo.remaining != '' && editInfo.remaining <= 0 ? 'red' : '' }">
          {{ editInfo.remaining === '' ? '-' : isNaN(editInfo.remaining) ? '-' : editInfo.remaining }}个
        </span>
      </FormItem>
    </Form>
    <div class="tips" v-if="editInfo.remaining != '' && editInfo.remaining <= 0">
      <Icon type="ios-alert" color="#2D61F4" class="tips_icon" />
      变更后，
      <span>项目将无法创建新用户</span>
      ，请确认“项目账号数”输入是否正确
    </div>
    <div>
      <h3 class="title">变更说明</h3>
      <Input
        v-model="editInfo.changeDescription"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入说明..." />
    </div>
  </dt-modal-edit>
</template>

<script setup>
  import { ref } from 'vue'
  import dt from '@dt/dt'
  import { editOpt } from '../biz/accontOpt'
  import belongUserOrg from './belongUserOrg.vue'
  import apiMgr from '../biz/index.js'
  const proInfo = ref()
  const editInfo = ref({})

  const emits = defineEmits(['successful'])
  const userPhoneVal = ref({})
  const onOk = () => {
    proInfo.value.validate().then((res) => {
      if (res) {
        dt.ui.Modal.confirm({
          title: '确认',
          content: `请确认，是否将项目账号数从“${editInfo.value.accountNumberLast}个”变更为“${
            editInfo.value.accountNumber
          }个”，${
            editInfo.value.remaining1 < 0
              ? '减少' + Math.abs(editInfo.value.remaining1)
              : '增加' + editInfo.value.remaining1
          }个`,
          onOk: () => {
            let params = {
              tenantId: editInfo.value.id,
              accountNumber: editInfo.value.accountNumber,
              changeDescription: editInfo.value.changeDescription,
              changeType: 10
            }
            apiMgr.changeTenantForWeb(params).then((res) => {
              emits('successful')
            })
          },
          onCancel: () => {
            dt.ui.Message.info('您取消了操作。')
          }
        })
      }
    })
  }
  const fun = {
    accData: () => {
      return editInfo.value
    },
    accChange: () => {
      console.log('aaaa')
      if (editInfo.value.accountNumber > 0) {
        editInfo.value.remaining = editInfo.value.accountNumber - editInfo.value.sueAccount
        editInfo.value.remaining1 = editInfo.value.accountNumber - editInfo.value.accountNumberLast
        console.log(editInfo.value.remaining, 'editInfo.value.remaining')
      } else {
        editInfo.value.remaining = ''
        editInfo.value.remaining1 = ''
      }
    }
  }

  const editRef = ref()
  const cancelData = () => {}
  const hide = () => editRef.value.hide()

  const show = (val) => {
    console.log(val, 'bbbbbb')
    editInfo.value.id = val.id
    editInfo.value.tenantName = val.tenantName
    editInfo.value.tenantCode = val.tenantCode
    editInfo.value.tenantStatusName = val.tenantStatusName
    editInfo.value.accountNumberLast = val.accountNumber
    editInfo.value.sueAccount = val.accountNumber - val.accountSurplusNumber
    editInfo.value.accountSurplusNumber = val.accountSurplusNumber
    editInfo.value.accountNumber = ''
    editInfo.value.changeDescription = ''
    editInfo.value.remaining = ''

    editInfo.value.remaining1 = ''
    proInfo.value.init(new editOpt(fun), editInfo.value)

    editRef.value.show()
  }
  const showModal = ref(false)
  defineExpose({
    show,
    hide
  })
</script>

<style lang="scss" scoped>
  .topBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #ccc solid;
    background: #f7f4f4;
    padding: 20px 20px;
    line-height: 30px;
    font-size: 16px;
  }
  .tips {
    padding: 5px 10px;
    line-height: 1.4;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);
    margin: 10px;

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }
  .title {
    position: relative;
    padding-left: 16px;
    margin: 10px 0;
  }
  .title::before {
    content: '';
    width: 8px;
    height: 16px;
    background: #2d61f4;
    position: absolute;
    left: 0;
    top: 4px;
  }
  .formBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap; /* 设置换行 */
    > * {
      width: 49%;
    }
  }
</style>
